import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Check, Server, Zap, DollarSign } from 'lucide-react';
import Button from '../../components/Button';
import FAQItem from '../../components/FAQItem';
import { useLocalizedLink } from '../../hooks/useLocalizedLink';
import { useLanguage } from '../../contexts/LanguageContext';

const DatacenterIPv6 = () => {
  const { getLink } = useLocalizedLink();
  const { t } = useLanguage();
  const [billingPeriod, setBillingPeriod] = useState<'day' | 'week' | 'month' | 'year'>('month');

  const pricingData = {
    // 按天：单个 IP $0.02/天，批量购买享折扣（5/10/50 对应约 95%/90%/80% 单价）
    day: [
      { ips: 1, price: '$0.02', pricePerIP: `$0.02${t('pricing.pricingPages.datacenter.table.perIp')}${t('pricing.pricingPages.datacenter.table.perDay')}` },
      { ips: 5, price: '$0.10', pricePerIP: `$0.019${t('pricing.pricingPages.datacenter.table.perIp')}${t('pricing.pricingPages.datacenter.table.perDay')}` },
      { ips: 10, price: '$0.18', pricePerIP: `$0.018${t('pricing.pricingPages.datacenter.table.perIp')}${t('pricing.pricingPages.datacenter.table.perDay')}` },
      { ips: 50, price: '$0.80', pricePerIP: `$0.016${t('pricing.pricingPages.datacenter.table.perIp')}${t('pricing.pricingPages.datacenter.table.perDay')}` },
    ],
    // 按周：单个 IP $0.10/周，批量购买享折扣（5/10/50 对应约 95%/90%/80% 单价）
    week: [
      { ips: 1, price: '$0.10', pricePerIP: `$0.10${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.week')}` },
      { ips: 5, price: '$0.48', pricePerIP: `$0.095${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.week')}` },
      { ips: 10, price: '$0.90', pricePerIP: `$0.090${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.week')}` },
      { ips: 50, price: '$4.00', pricePerIP: `$0.080${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.week')}` },
    ],
    // 按月：单个 IP $0.30/月，批量购买享折扣
    month: [
      { ips: 1, price: '$0.30', pricePerIP: `$0.30${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.month')}` },
      { ips: 5, price: '$1.43', pricePerIP: `$0.286${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.month')}` },
      { ips: 10, price: '$2.70', pricePerIP: `$0.270${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.month')}` },
      { ips: 50, price: '$12.00', pricePerIP: `$0.240${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.month')}` },
    ],
    // 按年：单个 IP $3/年，批量购买享折扣
    year: [
      { ips: 1, price: '$3.00', pricePerIP: `$3.00${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.year')}` },
      { ips: 5, price: '$14.25', pricePerIP: `$2.85${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.year')}` },
      { ips: 10, price: '$27.00', pricePerIP: `$2.70${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.year')}` },
      { ips: 50, price: '$120.00', pricePerIP: `$2.40${t('pricing.pricingPages.datacenter.table.perIp')}/${t('pricing.pricingPages.datacenter.period.year')}` },
    ],
  };

  const periodLabels = {
    day: t('pricing.pricingPages.datacenter.period.day'),
    week: t('pricing.pricingPages.datacenter.period.week'),
    month: t('pricing.pricingPages.datacenter.period.month'),
    year: t('pricing.pricingPages.datacenter.period.year'),
  };

  const featuresList = t('pricing.pricingPages.datacenter.features.list');
  const features = Array.isArray(featuresList) ? featuresList : [];

  const advantages = [
    {
      icon: DollarSign,
      title: t('pricing.pricingPages.datacenter.featureCards.affordable.title'),
      description: t('pricing.pricingPages.datacenter.featureCards.affordable.description'),
    },
    {
      icon: Zap,
      title: t('pricing.pricingPages.datacenter.featureCards.ultraFast.title'),
      description: t('pricing.pricingPages.datacenter.featureCards.ultraFast.description'),
    },
    {
      icon: Server,
      title: t('pricing.pricingPages.datacenter.featureCards.reliable.title'),
      description: t('pricing.pricingPages.datacenter.featureCards.reliable.description'),
    },
  ];

  return (
    <div className="w-full">
      {/* Header */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <div className="inline-flex items-center justify-center p-2 bg-[#00d4ff]/10 rounded-full mb-4">
            <Server className="text-[#00d4ff]" size={32} />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('pricing.pricingPages.datacenter.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto">
            {t('pricing.pricingPages.datacenter.subtitle')}
          </p>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {advantages.map((advantage, index) => (
              <div key={index} className="text-center">
                <div className="inline-flex items-center justify-center w-16 h-16 bg-[#00d4ff]/10 rounded-full mb-4">
                  <advantage.icon className="text-[#00d4ff]" size={32} />
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                  {advantage.title}
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  {advantage.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Price Comparison Banner */}
      <section className="bg-gradient-to-r from-[#00d4ff]/10 to-[#0f1c3f]/10 dark:from-[#00d4ff]/5 dark:to-gray-800/50 py-8 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <div className="inline-flex items-center space-x-2 bg-white dark:bg-gray-800 px-6 py-3 rounded-full shadow-lg border border-[#00d4ff]/20">
            <DollarSign className="text-[#00d4ff]" size={24} />
            <span className="text-[#0f1c3f] dark:text-white font-bold">
              {t('pricing.pricingPages.datacenter.savingBanner.title')}
            </span>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="bg-white dark:bg-gray-900 py-16 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-[#0f1c3f] dark:text-white mb-4">
              {t('pricing.pricingPages.datacenter.period.title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-300 mb-8">
              {t('pricing.pricingPages.datacenter.period.description')}
            </p>

            {/* Period Selector */}
            <div className="inline-flex p-1.5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner mb-12">
              {(Object.keys(periodLabels) as Array<keyof typeof periodLabels>).map((period) => (
                <button
                  key={period}
                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-all duration-300 ${
                    billingPeriod === period
                      ? 'bg-gradient-to-r from-[#0f1c3f] to-[#1a2a5e] dark:from-gray-700 dark:to-gray-600 text-white shadow-md'
                      : 'text-gray-700 dark:text-gray-300 hover:text-[#0f1c3f] dark:hover:text-white'
                  }`}
                  onClick={() => setBillingPeriod(period)}
                >
                  {t('pricing.pricingPages.datacenter.period.prefix')}{periodLabels[period]}
                </button>
              ))}
            </div>
          </div>

          {/* Pricing Table */}
          <div className="max-w-5xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {pricingData[billingPeriod].map((plan, index) => (
                <div
                  key={index}
                  className={`rounded-xl p-6 border transition-all duration-300 flex flex-col ${
                    index === 2
                      ? 'border-2 border-[#00d4ff] bg-white dark:bg-gray-800 shadow-xl'
                      : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
                  }`}
                >
                  {/* Badge area with fixed height */}
                  <div className="h-8 text-center mb-4">
                    {index === 2 && (
                      <span className="inline-block bg-[#00d4ff] text-[#0f1c3f] dark:text-white text-xs font-bold px-3 py-1 rounded-full">
                        {t('pricing.recommended')}
                      </span>
                    )}
                  </div>

                  {/* IP count section with fixed height */}
                  <div className="text-center mb-6">
                    <div className="text-3xl font-bold text-[#0f1c3f] dark:text-white mb-1">
                      {plan.ips}
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      {plan.ips === 1 ? 'IP' : 'IPs'}
                    </div>
                  </div>

                  {/* Divider */}
                  <div className="border-b border-gray-200 dark:border-gray-700 mb-6"></div>

                  {/* Price section with fixed height */}
                  <div className="text-center mb-6">
                    <div className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-1">
                      {plan.price}
                    </div>
                    <div className="text-xs text-[#00d4ff]">{plan.pricePerIP}</div>
                  </div>

                  {/* Spacer to push button to bottom */}
                  <div className="flex-grow"></div>

                  {/* Button aligned at bottom */}
                  <div className="mt-auto">
                    <Link to={getLink('/pricing/purchase-datacenter')}>
                      <Button
                        variant={index === 2 ? 'gradient' : 'outline'}
                        fullWidth
                      >
                        {t('pricing.buyNow')}
                      </Button>
                    </Link>
                  </div>
                </div>
              ))}
            </div>

            {/* Features List */}
            <div className="mt-12 bg-gray-50 dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700">
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-6 text-center">
                {t('pricing.pricingPages.datacenter.features.title')}
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {features.map((feature: string, idx: number) => (
                  <div key={idx} className="flex items-start">
                    <Check
                      className="text-[#00c853] mr-2 mt-1 flex-shrink-0"
                      size={18}
                    />
                    <span className="text-gray-700 dark:text-gray-300">
                      {feature}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Custom Plan */}
            <div className="mt-8 text-center">
              <div className="inline-block bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700">
                <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mb-2">
                  {t('pricing.pricingPages.datacenter.needMore')}
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4">
                  {t('pricing.pricingPages.datacenter.customSolution')}
                </p>
                <Link to={getLink('/support')}>
                  <Button variant="outline">{t('pricing.pricingPages.datacenter.contactSales')}</Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section className="py-12 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
        <div className="container mx-auto px-4 max-w-4xl">
          <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-8 text-center">
            {t('pricing.pricingPages.datacenter.comparison.title')}
          </h2>
          <div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-900">
                <tr>
                  <th className="px-6 py-4 text-left text-sm font-bold text-[#0f1c3f] dark:text-white">
                    {t('pricing.pricingPages.datacenter.comparison.headers.feature')}
                  </th>
                  <th className="px-6 py-4 text-center text-sm font-bold text-[#0f1c3f] dark:text-white">
                    {t('pricing.pricingPages.datacenter.comparison.headers.datacenter')}
                  </th>
                  <th className="px-6 py-4 text-center text-sm font-bold text-[#0f1c3f] dark:text-white">
                    {t('pricing.pricingPages.datacenter.comparison.headers.residential')}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td className="px-6 py-4 text-gray-700 dark:text-gray-300">
                    {t('pricing.pricingPages.datacenter.comparison.rows.price.label')}
                  </td>
                  <td className="px-6 py-4 text-center text-[#00c853] font-bold">
                    {t('pricing.pricingPages.datacenter.comparison.rows.price.datacenter')}
                  </td>
                  <td className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    {t('pricing.pricingPages.datacenter.comparison.rows.price.residential')}
                  </td>
                </tr>
                <tr>
                  <td className="px-6 py-4 text-gray-700 dark:text-gray-300">
                    {t('pricing.pricingPages.datacenter.comparison.rows.speed.label')}
                  </td>
                  <td className="px-6 py-4 text-center text-[#00c853] font-bold">
                    {t('pricing.pricingPages.datacenter.comparison.rows.speed.datacenter')}
                  </td>
                  <td className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    {t('pricing.pricingPages.datacenter.comparison.rows.speed.residential')}
                  </td>
                </tr>
                <tr>
                  <td className="px-6 py-4 text-gray-700 dark:text-gray-300">
                    {t('pricing.pricingPages.datacenter.comparison.rows.stability.label')}
                  </td>
                  <td className="px-6 py-4 text-center text-[#00c853] font-bold">
                    {t('pricing.pricingPages.datacenter.comparison.rows.stability.datacenter')}
                  </td>
                  <td className="px-6 py-4 text-center text-[#00c853] font-bold">
                    {t('pricing.pricingPages.datacenter.comparison.rows.stability.residential')}
                  </td>
                </tr>
                <tr>
                  <td className="px-6 py-4 text-gray-700 dark:text-gray-300">
                    {t('pricing.pricingPages.datacenter.comparison.rows.anonymity.label')}
                  </td>
                  <td className="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    {t('pricing.pricingPages.datacenter.comparison.rows.anonymity.datacenter')}
                  </td>
                  <td className="px-6 py-4 text-center text-[#00c853] font-bold">
                    {t('pricing.pricingPages.datacenter.comparison.rows.anonymity.residential')}
                  </td>
                </tr>
                <tr>
                  <td className="px-6 py-4 text-gray-700 dark:text-gray-300">
                    {t('pricing.pricingPages.datacenter.comparison.rows.useCase.label')}
                  </td>
                  <td className="px-6 py-4 text-center text-gray-700 dark:text-gray-300 text-sm">
                    {t('pricing.pricingPages.datacenter.comparison.rows.useCase.datacenter')}
                  </td>
                  <td className="px-6 py-4 text-center text-gray-700 dark:text-gray-300 text-sm">
                    {t('pricing.pricingPages.datacenter.comparison.rows.useCase.residential')}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4 max-w-4xl">
          <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-8 text-center">
            {t('pricing.pricingPages.datacenter.faq.title')}
          </h2>
          <div className="space-y-4">
            <FAQItem
              question={t('pricing.pricingPages.datacenter.faq.q1.question')}
              answer={t('pricing.pricingPages.datacenter.faq.q1.answer')}
              defaultOpen={true}
            />
            <FAQItem
              question={t('pricing.pricingPages.datacenter.faq.q2.question')}
              answer={t('pricing.pricingPages.datacenter.faq.q2.answer')}
            />
            <FAQItem
              question={t('pricing.pricingPages.datacenter.faq.q3.question')}
              answer={t('pricing.pricingPages.datacenter.faq.q3.answer')}
            />
            <FAQItem
              question={t('pricing.pricingPages.datacenter.faq.q4.question')}
              answer={t('pricing.pricingPages.datacenter.faq.q4.answer')}
            />
          </div>
        </div>
      </section>
    </div>
  );
};

export default DatacenterIPv6;
